<template>
  <div class='container'>
    <el-card>
      <!-- 表单查询 -->
      <el-form size="small" :inline="true" ref="requestParameters" :model="requestParameters" class="demo-form-inline">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="关键字" prop="keyword">
              <el-input v-model="requestParameters.keyword" placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态" prop="state">
              <el-select v-model="requestParameters.state" placeholder="请选择">
                <el-option
                  v-for="item in status"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button @click="resetForm('requestParameters')">清除</el-button>
            <el-button type="primary" :loading="isloading" @click="onSearch">搜索</el-button>
          </el-col>
          <el-button size="small" type="success" icon="el-icon-edit" class="rightBtn" @click="hAdd">新增技巧</el-button>
        </el-row>
      </el-form>
      <!-- 数据记录 -->
      <el-alert
        :title="alertText"
        type="info"
        show-icon
        :closable="false">
      </el-alert>
      <!-- 表格列表 -->
      <el-table
        v-loading="tableloading"
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="序号"
          width="80">
        </el-table-column>
        <el-table-column
          prop="title"
          label="文章标题"
          width="280"
          icon="el-icon-film">
          <template slot-scope="scope">
            <span>{{scope.row.title}}</span>
            <i v-show="scope.row.videoURL" @click="hvideoDisplay(scope.row)" style="color:blue" class="el-icon-film"></i>
          </template>
        </el-table-column>
        <el-table-column
          prop="visits"
          label="阅读数"
          width="120">
        </el-table-column>
        <el-table-column
          prop="username"
          label="录入人"
          width="140">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="录入时间"
          width="160">
          <template slot-scope="scope">
            <span>{{scope.row.createTime | parseTimeByString}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态"
          width="140">
          <template slot-scope="scope">
            <span>{{scope.row.state?"已启用":"已禁用"}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="操作">
          <template slot-scope="scope">
            <el-button @click="hShowDetail(scope.row)" type="text" size="small">预览</el-button>
            <!-- :loading="isSwitch" -->
            <el-button
              type="text"
              size="small"
              @click="hSwitch(scope.row)"
              >
              {{scope.row.state?"禁用":"启用"}}
            </el-button>
            <el-button @click="hEdit(scope.row.id)" :disabled="scope.row.state===1" type="text" size="small">修改</el-button>
            <el-button type="text" size="small" @click="hDetele(scope.row)" :disabled="scope.row.state===1">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        v-if="tableData.length!=0"
        background
        @size-change="hSizeChange"
        @current-change="hCurrentChange"
        :current-page="requestParameters.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="prev, pager, next, sizes, jumper"
        :total="totalCount">
      </el-pagination>
      <!-- 文章预览-弹框 -->
      <el-dialog
        title="文章预览"
        :visible.sync="dialogVisible"
        width="60%">
        <articles-preview v-model="this.articleDetail"></articles-preview>
      </el-dialog>
      <!-- 添加文章-弹框 -->
      <article-add ref="editUser" :title="titleInfo" :edit="editInfo" :getList="getlist"></article-add>
      <!-- 视频播放-弹框 -->
      <div class="video" :class="{hidden:!videoDisplay}">
        <div class="close" @click="hVideoClose">
          <i class="el-icon-close"></i>
        </div>
        <video poster="../../assets/401_images/401.gif" class="player" autoplay="autoplay" :src="videoSRC" controls="controls"></video>
      </div>
    </el-card>
  </div>
</template>

<script>
import articlesPreview from '../components/articles-preview'
import articleAdd from '../components/articles-add'
import { status } from '@/api/hmmm/constants'
import { list, detail, remove, changeState } from '@/api/hmmm/articles.js'
export default {
  name: 'articles',
  components: {
    articlesPreview,
    articleAdd
  },
  data () {
    return {
      // 启用/禁用加载
      // isSwitch: false,
      // 加载按钮
      isloading: false,
      // 加载table
      tableloading: false,
      // 分页
      // 1
      requestParameters: {
        page: 1,
        pagesize: 10,
        keyword: null,
        state: null
      },
      // 表格中数据列表
      tableData: [],
      // 数据响应条数
      alertText: '',
      // 总条数
      totalCount: 100,
      // 文章详情
      articleDetail: {},
      // 预览文章-弹框
      dialogVisible: false,
      // 添加文章-弹框
      dialogAdd: false,
      // 弹框名称
      titleInfo: '',
      // 编辑里信息
      editInfo: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      // 禁用/启用-操作
      isSelect: false,
      // 显示视频-默认不显示
      videoDisplay: false,
      // 视频地址
      videoSRC: ''
    }
  },
  created () {
    this.getlist()
  },
  computed: {
    status () {
      return status
    }
  },
  methods: {
    // ...parseTimeByString,
    // 获取面试技巧列表数据
    async getlist (params) {
      console.log('params', params)
      const result = await list(this.requestParameters)
      console.log('面试技巧列表：', result)
      this.tableData = result.data.items
      // console.log(this.tableData)
      this.totalCount = result.data.counts
      this.alertText = `数据一共 ${this.totalCount} 条`
      this.isloading = false
      // this.getlist()
    },
    // 搜索
    onSearch () {
      this.isloading = true
      // 将state转成0-1的形式-v-for出来的状态直接是0、1格式
      this.requestParameters.page = 1
      // console.log('重新搜索：', this.requestParameters)
      this.getlist(this.requestParameters)
    },
    // 清除
    resetForm (requestParameters) {
      // 重置表单
      this.$refs[requestParameters].resetFields()
      // 重刷页面
      this.getlist()
    },
    // 操作-预览
    async hShowDetail (row) {
      // 加载状态
      this.tableloading = true
      console.log(row)
      // 弹框显示
      this.dialogVisible = true
      const res = await detail({ id: row.id })
      console.log('文章详情', res)
      this.articleDetail = res.data
      this.tableloading = false
    },
    // 分页
    hSizeChange (val) {
      // 每页显示多少条
      console.log(`每页 ${val} 条`)
      this.requestParameters.pagesize = val
      this.getlist(this.requestParameters)
    },
    // 换页
    hCurrentChange (val) {
      console.log(`当前页: ${val}`)
      // console.log(val);
      this.requestParameters.page = val
      this.getlist(this.requestParameters)
    },
    hAdd () {
      // 新增->每次进入清空表单
      this.editInfo = {}
      this.titleInfo = '创建用户' // 给弹层传参
      // console.log(this.$refs.editUser.Visble())
      this.$refs.editUser.Visble()
    },
    hEdit (id) {
      this.$refs.editUser.Visble()
      this.titleInfo = '编辑用户' // 给弹层传参
      this.articleEdit(id)
    },
    // 编辑文章-获取详情
    async articleEdit (id) {
      // this.editInfo.id = id
      const res = await detail({ id })
      this.editInfo = res.data
      // console.log('编辑-详情', this.editInfo)
    },
    // 删除
    hDetele (row) {
      console.log('删除文章id', row.id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        console.log(row.id)
        const res = await remove({ id: row.id })
        console.log(res)
        this.getlist()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 启用/禁用
    async hSwitch (row) {
      // loading
      // this.isSwitch = true
      console.log(row.state)
      row.state = row.state === 1 ? 0 : 1
      const res = await changeState({ id: row.id, state: row.state })
      console.log('状态更改', res)
      this.$message.success('操作成功喽！')
      this.getlist()
      // this.isSwitch = false
    },
    // 显示视频
    hvideoDisplay (row) {
      console.log('视频播放id:', row.id)
      console.log('视频播放地址：', row.videoURL)
      this.videoDisplay = true
      this.videoSRC = row.videoURL
    },
    // 关闭视频图层
    hVideoClose () {
      this.videoDisplay = false
      console.log('关闭视频弹框')
      // 清空视频播放地址
      this.videoSRC = ''
    }
  }
}
</script>
<style>
/* 视频播放弹层 */
  .hidden {
    display: none;
  }
  .video {
    width: 900px;
    height: 480px;
    position: fixed;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    z-index: 1;
  }
  .player {
    /* 铺满整屏 */
    object-fit: fill;
    width: 100%;
    height: 80%;
    position: absolute;
    top: 12%;
  }
  .close {
    position: absolute;
    left: 50%;
    margin-left: -23px;
    width: 46px;
    height: 46px;
    border-radius: 46px;
    background: rgb(27, 26, 26);
    opacity: 0.5
  }
  .el-icon-close {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -10px;
    font-size: 20px;
    color: rgb(255, 255, 255);
  }
</style>

<style scoped>
  .el-card {
    margin-bottom: 20px;
  }
  .rightBtn {
    float: right;
  }
  .el-alert {
    margin-bottom: 20px;
  }
  .el-table {
    margin-bottom: 20px;
  }
  .el-pagination {
    float: right;
    margin-bottom: 20px;
  }
</style>
